import { Component, OnInit } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";
declare let AMap:any;
declare let $:any;
declare let window:any;
@Component({
  selector: 'app-gis',
  templateUrl: './gis.component.html',
  styleUrls: ['./gis.component.css']
})
export class GisComponent implements OnInit {

  map:any;
  cluster:any;
  init:boolean = true;

  data:any;
  oo:any = {devicename:'',province:'',city:'',district:''};
  constructor(private httpRequest:HttpRequest) {

  }

  ngOnInit() { 
    window.onload = () =>{
      this.map.plugin(["AMap.ToolBar"], ()=> {
        this.map.addControl(new AMap.ToolBar());
      });
      if(location.href.indexOf('&guide=1')!==-1){
        console.log(location.href)
        this.map.setStatus({scrollWheel:false})
      }
    }
    this.map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 13
    });

    AMap.event.addListener(this.map, 'zoomchange', (e) => { //绑定zoomchange事件并获取全景缩放级别
      let zoom  = this.map.getZoom();
      let center = this.map.getCenter();
      let geo1 = center.lng + ',' + center.lat;
      if(zoom>15){
        //console.log(this.cluster);
        if(this.cluster){
          //console.log(zoom);
          this.cluster.setMap(null);
          this.fetchinfolist(geo1);
        }
      }
      if (zoom<16) {
        if (this.cluster.getMap() == null) {
          this.addClusterer();
          this.map.clearMap();
        }
      }
    });
    this.addClusterer();
  }

  addClusterer(){
    this.httpRequest.sendGet('devices/geolist',{
    }).subscribe(res => {

      let markers=[];
      let that = this;
      for(let i in res){
        let position = JSON.parse(res[i]);
        let marker = new AMap.Marker({
          map:this.map,
          icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          position:position
        });
        //console.log(markers);
        //marker.on("click", function(obj) {
        //  console.log(obj);
        //  that.map.setZoomAndCenter(16,[this.G.position.lng,this.G.position.lat]);
        //});
        markers.push(marker);
      }
      this.map.plugin(["AMap.MarkerClusterer"], () => {
        this.cluster = new AMap.MarkerClusterer(this.map, markers);
      });
      if(this.init) {
        this.map.setFitView();
        this.init = false;
      }
    },err => console.log(err));
  }

  fetchinfolist(ant) {


    this.httpRequest.sendGet('devices/geoinfolist',{
      geo:ant
    }).subscribe(res => {

      //console.log(data);
      let new_arr = [];
      // console.log(testdata);
      for(let i=0;i<res.length;i++){
        let tda = res[i];
        let new_item = {};
        new_item['geo'] = tda.geo;

        let device = {};
        device['id'] = tda.id;
        device['name'] = tda.name;
        device['online'] = tda.online;
        device['loction'] = tda.area+tda.street;
        device['monitorTemp'] = tda.monitorTemp;

        let isDup = false;
        for (let j = 0; j < new_arr.length; j++) {
          if (new_arr[j].geo == new_item['geo']) {
            new_arr[j].devices.push(device);
            isDup = true;
          }
        }

        if (!isDup) {
          new_item['devices'] = [];
          new_item['devices'].push(device);

          new_arr.push(new_item);
        }
      }

      //console.log(new_arr);
      this.addmarkers(new_arr)
    },err=>{});

  }

  addmarkers(new_arr) {
    for(let k=0;k<new_arr.length;k++){
      let geo;
      let devices;
      let position;
      //console.log(new_arr[k])
      geo = new_arr[k].geo;
      devices = new_arr[k].devices;
      //console.log(geo);
      position = JSON.parse(geo);
      if(position){
        this.createInfoWindow(position, devices);
      }
    }
  }

  createInfoWindow(position, devices) {
    //console.log(devices);
    let marker = new AMap.Marker({
      map:this.map,
      icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
      position:position
    });

    let loction;
    let content = '';
    let tableHtml = "<table class='table' style='margin-top:5px;min-width:450px;'>"
      +"<thead><tr >"
      +"<th>设备id</th><th>名称</th><th>状态</th>"
      +"</tr></thead>";

    for(let l=0;l<devices.length;l++){

      let name,id,online,did;
      did = devices[l].id.replace("/","|");
      loction = devices[0].loction;
      id = "<a style='color:blue' href='#/page/archives/info/deviceinfo/" + did + "'>" + devices[l].id+"</a>";
      name = devices[l].name;

      online = devices[l].online;
      if(online==0){
        online = "离线";
      }else{
        online ="在线";
      }

      let trHtml ="<tr>"
        + "<td>" + id +"</td><td>" + name +"</td><td>" + online +"</td>"
        + "</tr>";
      tableHtml += trHtml;
      content = tableHtml;
    }


    let infoWindow = new AMap.InfoWindow({
      content : "<div class='box-header with-border'>" + "<h3 class='box-title'>"+loction+'</h3>'
      +"<div class='box-tools pull-right'>"
      +"</div></div>"+"<div class='box-body'>"+content+"</div>",
      offset: {x: 0, y: -30}
    });

    marker.on("click", (e) => {
      infoWindow.open(this.map, marker.getPosition());
    });
  }
}
